<template>
  <div>
    <kms-list-head
      ref="listHead"
      :search.sync="search"
      :kms-type="kmsType"
      title="文件库管理"
      placeholder="请输入文件名称"
      main-title="上传/新建文件"
      @on-handle="listHeadHandle"
      @on-search="financeSearch"
      @on-export="exportInfos"/>
    <div
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="finance-container">
      <KmsTableHead
        ref="kmsTableHead"
        :kms-type="kmsType"
        @exportData="exportData"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene"
        @realtiveSourceList="realtiveSourceList"/>
      <el-table
        v-loading="loading"
        id="kms-table"
        :data="list"
        :height="tableHeight"
        :cell-style="cellStyle"
        class="n-table--border"
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange">
        <el-table-column
          show-overflow-tooltip
          type="selection"
          align="center"
          width="55"/>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="fieldFormatter"
          show-overflow-tooltip>
          <template
            slot-scope="scope">
            <div :title="scope.row[item.prop]" :class="[item.prop == 'title' ? 'table-head-name-title' :'']" class="table-head-name">
              <i v-if="item.prop == 'title'" :class="scope.row['fileType'] | filterImg" class="fileImg"/>
              <span class="text">{{ scope.row[item.prop] | time(item.prop) }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          width="120"
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="editCrate(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column/>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          class="p-bar"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
    </div>
    <supplier-detail
      v-if="showDview"
      :id="rowID"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview=false"/>
    <fields-set
      :kms-type="kmsType"
      :dialog-visible.sync="showFieldSet"
      @set-success="setSave"/>
  </div>
</template>

<script>
import SupplierDetail from './filehouseDetail'
import table from '../mixins/table'
import kmsTypeModel from '@/views/kmsmanagement/model/kmsTypeModels'
import { getFileList, kmsFileDelete } from '../../../api/kmsmanagement/file'
import { timeKeepFormatter } from '@/utils/index.js'
export default {
  /** 客户管理 的 产品列表 */
  name: 'MaterialIndex',
  components: {
    SupplierDetail
  },
  filters: {
    filterImg(res) {
      let type = res.toString().toLocaleLowerCase()
      if (type == 'jpeg' || type == 'jpg' || type == 'png') {
        res = 'img'
      }
      if (type == 'mp4' || type == 'mp3' || type == 'wmv' || type == 'avi' || type == 'dat' || type == 'mkv' || type == 'flv' || type == 'vob') {
        res = 'video'
      }
      if (type == 'pptx' || type.startsWith('pp')) {
        type = 'ppt'
      }
      if (type == 'doc' || type == 'docx') {
        type = 'word'
      }
      if (type == 'xls' || type == 'xlsx') {
        type = 'excel'
      }
      const classList = {
        'pdf': 'img_pdf',
        'ppt': 'img_ppt',
        'img': 'img_img',
        'excel': 'img_excel',
        'txt': 'img_txt',
        'word': 'img_word',
        'video': 'img_video',
        'zip': 'img_zip',
        'default': 'img_unknown'
      }
      return res in classList ? classList[res] : classList.default
    },
    time(val, prop) {
      if (prop != 'standardStudySeconds') {
        return val
      }
      val = Number(val)
      var sec = parseInt(val / 60)
      var min = Number((val - sec * 60) / 60)
      // eslint-disable-next-line no-unused-vars
      var res = Math.ceil(Number(min.toFixed(2)) * 10) / 10
      return sec + res
    }
  },
  mixins: [table],
  data() {
    return {
      kmsType: 'file',
      five_start_dis: true,
      fileValue: ''
    }
  },
  computed: {},
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.updateTableHeight()
    }
    if (this.kms[this.kmsType].index) {
      this.loading = true
      this.getList()
    }
  },
  methods: {
    /** 通过回调控制style */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'name') {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    },
    /** 获取列表数据 */
    getList() {
      this.loading = true
      var params = {
        page: this.currentPage,
        limit: this.pageSize,
        search: this.search,
        type: kmsTypeModel[this.kmsType]
      }
      if (this.sortData.order) {
        params.sortField = this.sortData.prop
        params.order = this.sortData.order == 'ascending' ? 2 : 1
      }

      if (this.sceneId) {
        params.sceneId = this.sceneId
      }
      if (this.filterObj && Object.keys(this.filterObj).length > 0) {
        params.data = this.filterObj
      }
      getFileList(params)
        .then(res => {
          this.list = res.data.list
          this.total = res.data.totalRow
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    },
    editCrate(val) {
      const data = {
        type: 'update',
        id: val.fileId,
        data: {
          fileType: val.fileType
        }
      }
      this.$refs.listHead.createClick(data)
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../financemanagement/styles/table.scss';
  .table-head-name {
    display: flex;
    align-items: center;
  }
  .table-head-name-title {
    .text {
      width: calc(100% - 23px);
    }
    .fileImg{
      width: 18px;
      height: 22px;
      display: inline-block;
      margin-right: 5px;
      background:#fff url("../../../assets/img/file_unknown.png") no-repeat center;
      background-size: 100% 100%;
      &.img_pdf {
        background-image: url("../../../assets/img/file_pdf.png");
        background-size: 100% 100%;
      }
      &.img_ppt {
        background-image: url("../../../assets/img/file_ppt.png");
        background-size: 100% 100%;
      }
      &.img_img {
        background-image: url("../../../assets/img/file_img.png");
        background-size: 100% 100%;
      }
      &.img_excel {
        background-image: url("../../../assets/img/file_excle.png");
        background-size: 100% 100%;
      }
      &.img_txt {
        background-image: url("../../../assets/img/file_txt.png");
        background-size: 100% 100%;
      }
      &.img_word {
        background-image: url("../../../assets/img/file_word.png");
        background-size: 100% 100%;
      }
      &.img_video {
        background-image: url("../../../assets/img/file_video.png");
        background-size: 100% 100%;
      }
      &.img_zip {
        background-image: url("../../../assets/img/file_zip.png");
        background-size: 100% 100%;
      }
      &.img_default {
        background-image: url("../../../assets/img/file_unknown.png");
        background-size: 100% 100%;
      }
    }
  }

</style>

